<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>YOLOv8视频智能检测</title>
    <!-- 外部资源引入 -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- Tailwind CSS 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#2563eb', // 主色调
                        secondary: '#4f46e5', // 辅助色
                        danger: '#ef4444', // 危险色
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>

    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }

            .shadow-custom {
                box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
            }

            .card-hover {
                transition: transform 0.3s ease, box-shadow 0.3s ease;
            }

            .card-hover:hover {
                transform: translateY(-4px);
                box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
            }

            .drag-over {
                border-color: #2563eb;
                background-color: rgba(37, 99, 235, 0.05);
            }
            
            .nav-item.active {
                color: #2563eb;
                font-weight: 600;
            }
            
            .nav-item {
                color: #6b7280;
            }
            
            .modal-overlay {
                background-color: rgba(0, 0, 0, 0.5);
                backdrop-filter: blur(2px);
            }
        }
    </style>

    <style>
        html, body {
            font-family: 'Inter', system-ui, sans-serif;
            overflow: hidden; /* 禁用页面滚动 */
            height: 100vh; /* 使body占满整个视口高度 */
            margin: 0;
            padding: 0;
        }
        
        .animate-on-scroll {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.6s ease, transform 0.6s ease;
        }
        
        .animate-on-scroll.animate-visible {
            opacity: 1;
            transform: translateY(0);
        }
        
        /* 底部导航栏样式 */
        .bottom-nav {
            border-top: 1px solid #e5e7eb;
            backdrop-filter: blur(8px);
        }
        
        /* 登录模态框动画 */
        .modal {
            transition: opacity 0.3s ease, transform 0.3s ease;
        }
        
        /* iframe样式 */
        #content-iframe {
            width: 100%;
            height: calc(100vh - 112px); /* 精确计算高度，减去顶部和底部导航栏 */
            border: none;
            overflow-y: auto; /* 允许iframe内部滚动 */
            display: block;
        }
    </style>
</head>
<body class="bg-gray-50 text-gray-900">
    <!-- 顶部导航栏 -->
    <header class="fixed top-0 left-0 right-0 bg-white/95 backdrop-blur-sm z-30 shadow-sm">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <i class="fa fa-bolt text-primary text-xl"></i>
                <h1 class="text-lg font-bold text-primary">YOLOv8视频检测</h1>
            </div>
            
            <div class="flex items-center space-x-4">
                <!-- 登录功能已移除，所有登录相关操作请在个人中心页面进行 -->
            </div>
        </div>
    </header>

    <!-- 主内容区域 -->
    <main class="pt-16 pb-16">
        <!-- 主要内容通过iframe加载 -->
        <iframe id="content-iframe" src="intro.html" sandbox="allow-scripts allow-same-origin"></iframe>
    </main>

    <!-- 底部导航栏 - 移动App风格 -->
    <footer class="fixed bottom-0 left-0 right-0 bottom-nav bg-white/95 z-40">
        <div class="flex justify-around">
            <button id="nav-intro" class="nav-item active flex flex-col items-center py-3 px-4">
                <i class="fa fa-home text-xl mb-1"></i>
                <span class="text-xs">介绍</span>
            </button>
            <button id="nav-detect" class="nav-item flex flex-col items-center py-3 px-4">
                <i class="fa fa-search text-xl mb-1"></i>
                <span class="text-xs">检测</span>
            </button>
            <button id="nav-profile" class="nav-item flex flex-col items-center py-3 px-4">
                <i class="fa fa-user text-xl mb-1"></i>
                <span class="text-xs">我</span>
            </button>
        </div>
    </footer>

    <!-- 登录和注册模态框已移除 -->

    <!-- JavaScript -->
    <script>
        // 等待DOM加载完成
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化导航功能
            initNavigation();
        });

        // 初始化导航功能
        function initNavigation() {
            // 获取导航按钮元素
            const navIntro = document.getElementById('nav-intro');
            const navDetect = document.getElementById('nav-detect');
            const navProfile = document.getElementById('nav-profile');
            const navItems = [navIntro, navDetect, navProfile];
            
            // 确保元素都存在
            if (!navIntro || !navDetect || !navProfile) {
                console.error('导航按钮元素不存在');
                return;
            }
            
            // 导航点击处理函数
            function handleNavClick(pageName, activeNav) {
                console.log(`切换到页面: ${pageName}`);
                
                // 获取iframe并设置src
                const iframe = document.getElementById('content-iframe');
                if (iframe) {
                    iframe.src = pageName + '.html';
                    
                    // 更新页面标题
                    let title = 'YOLOv8视频智能检测';
                    if (pageName === 'intro') {
                        title = 'YOLOv8视频智能检测 - 介绍';
                    } else if (pageName === 'detect') {
                        title = 'YOLOv8视频智能检测 - 检测';
                    } else if (pageName === 'profile') {
                        title = 'YOLOv8视频智能检测 - 我的';
                    }
                    document.title = title;
                    
                    // 滚动到顶部
                    window.scrollTo(0, 0);
                }
                
                // 更新导航激活状态
                navItems.forEach(item => {
                    item.classList.remove('active');
                    item.classList.add('text-gray-500');
                });
                activeNav.classList.add('active');
                activeNav.classList.remove('text-gray-500');
            }
            
            // 绑定点击事件
            navIntro.onclick = function() {
                handleNavClick('intro', navIntro);
            };
            
            navDetect.onclick = function() {
                handleNavClick('detect', navDetect);
            };
            
            navProfile.onclick = function() {
                handleNavClick('profile', navProfile);
            };
        }
        
        // 登录相关功能已移除，所有登录操作请在个人中心页面进行
        
        // 监听来自iframe的消息
        window.addEventListener('message', function(event) {
            const data = event.data;
            
            if (!data || typeof data !== 'object') return;
            
            if (data.action === 'refreshPage') {
                // 刷新当前页面内容
                const iframe = document.getElementById('content-iframe');
                if (iframe && iframe.src) {
                    const currentPage = iframe.src.split('/').pop().replace('.html', '');
                    iframe.src = currentPage + '.html';
                }
            } else if (data.action === 'goToDetectPage') {
                // 跳转到检测页面
                const navDetect = document.getElementById('nav-detect');
                if (navDetect) {
                    navDetect.click();
                }
            }
        });
        
        // 添加滚动动画效果
        function animateOnScroll() {
            const elements = document.querySelectorAll('.animate-on-scroll');
            
            elements.forEach(element => {
                const elementPosition = element.getBoundingClientRect().top;
                const windowHeight = window.innerHeight;
                
                if (elementPosition < windowHeight * 0.85) {
                    element.classList.add('animate-visible');
                }
            });
        }
        
        // 绑定滚动事件
        window.addEventListener('scroll', animateOnScroll);
        window.addEventListener('load', animateOnScroll);
    </script>
</body>
</html>